.orders-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;

  // 顶部 Tabs
  .tabs-container {
    background-color: #fff;
    padding: 0 30rpx;
    border-bottom: 1px solid #f0f0f0;

    .order-tabs {
      --nutui-tabs-titles-border-radius: 0;
      --nutui-tabs-titles-background-color: transparent;
      --nutui-tabs-tab-line-color: #4facfe;
      --nutui-tabs-tab-text-color: #666;
      --nutui-tabs-tab-active-text-color: #4facfe;
      --nutui-tabs-tab-font-size: 32rpx;
      --nutui-tabs-tab-active-font-weight: 600;
    }
  }

  // 订单列表
  .orders-list {
    padding: 20rpx 30rpx;

    .loading {
      text-align: center;
      padding: 100rpx 0;
      color: #999;
      font-size: 28rpx;
    }

    .order-card {
      --nutui-card-border-radius: 16rpx;
      --nutui-card-padding: 0;
      margin-bottom: 20rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
      border: 1px solid #f0f0f0;

      // 订单头部
      .order-header {
        padding: 24rpx 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;

        .order-info {
          display: flex;
          align-items: center;
          gap: 16rpx;

          .status-tag {
            --nutui-tag-font-size: 22rpx;
            --nutui-tag-padding: 4rpx 12rpx;
            --nutui-tag-border-radius: 12rpx;
          }

          .order-no {
            font-size: 26rpx;
            color: #666;
          }
        }

        .order-time {
          font-size: 26rpx;
          color: #999;
        }
      }

      // 订单内容
      .order-content {
        padding: 30rpx;
        display: flex;
        gap: 24rpx;
        align-items: flex-start;

        .service-image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 12rpx;
          background-color: #f5f5f5;
          flex-shrink: 0;
        }

        .service-info {
          flex: 1;

          .service-type {
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 12rpx;
            display: block;
            line-height: 1.4;
          }

          .service-detail {
            font-size: 26rpx;
            color: #666;
            margin-bottom: 16rpx;
            display: block;
            line-height: 1.4;
          }

          .service-price {
            font-size: 36rpx;
            font-weight: bold;
            color: #4facfe;
            display: block;
          }
        }
      }

      // 取件码
      .pickup-code {
        padding: 0 30rpx 20rpx;
        display: flex;
        align-items: center;
        gap: 8rpx;

        .code-label {
          font-size: 26rpx;
          color: #666;
        }

        .code-number {
          font-size: 32rpx;
          font-weight: bold;
          color: #ff8f1f;
          background-color: #fff7e6;
          padding: 8rpx 16rpx;
          border-radius: 8rpx;
          border: 1px solid #ffd591;
        }
      }

      // 操作按钮
      .order-actions {
        padding: 20rpx 30rpx 30rpx;
        display: flex;
        justify-content: flex-end;
        gap: 16rpx;

        .action-btn {
          --nutui-button-border-radius: 20rpx;
          --nutui-button-font-size: 26rpx;
          --nutui-button-small-height: 64rpx;
          --nutui-button-small-padding: 0 24rpx;
          font-weight: 500;

          &.primary {
            --nutui-button-primary-background-color: #4facfe;
            --nutui-button-primary-border-color: #4facfe;
          }

          &.secondary {
            --nutui-button-default-background-color: #f8f9fa;
            --nutui-button-default-color: #666;
            --nutui-button-default-border-color: #e9ecef;
          }
        }
      }
    }

    .empty-state {
      margin-top: 200rpx;
      
      .nut-empty__description {
        font-size: 28rpx;
        color: #999;
        margin-top: 30rpx;
      }
    }
  }
}

// 响应式适配
@media screen and (max-width: 375px) {
  .orders-page {
    .tabs-container {
      padding: 0 20rpx;
    }

    .orders-list {
      padding: 20rpx;

      .order-card {
        .order-header {
          padding: 20rpx 24rpx;
          flex-direction: column;
          align-items: flex-start;
          gap: 12rpx;

          .order-info {
            width: 100%;
          }

          .order-time {
            align-self: flex-end;
          }
        }

        .order-content {
          padding: 24rpx;

          .service-image {
            width: 100rpx;
            height: 100rpx;
          }

          .service-info {
            .service-type {
              font-size: 30rpx;
            }

            .service-detail {
              font-size: 24rpx;
            }

            .service-price {
              font-size: 32rpx;
            }
          }
        }

        .pickup-code {
          padding: 0 24rpx 16rpx;
        }

        .order-actions {
          padding: 16rpx 24rpx 24rpx;
        }
      }
    }
  }
}